<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>添加用户</title>
    <link href="../../static/css/index.css" rel="stylesheet" th:href="@{/static/css/index.css}">
    <!-- 自定义css文件 -->
    <link href="../../static/css/common.css" rel="stylesheet" th:href="@{/static/css/common.css}">
</head>

<body>

<div th:replace="~{nav :: nav('添加用户')}"></div>
<div th:replace="~{header :: header}"></div>
<div class="margin-helper">
    <div class="samoyed-content">
        <div th:replace="~{pageHead :: pageHead(pageName='添加用户', parentMenu='菜单导航')}"></div>
        <div id="page-content" class="page-content" v-cloak>
            <!--基本信息-->
            <div class="section-title">基本信息</div>
            <el-form :model="userForm" :rules="rules" ref="userForm" label-width="100px" >
                <el-form-item label="用户名称" prop="userUserName">
                    <el-input v-model="userForm.userUserName"   style="width: 33%" placeholder="请输入电话号"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="userPassword">
                    <el-input v-model="userForm.userPassword" style="width: 33%" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="userTelphone">
                    <el-input v-model="userForm.userTelphone" style="width: 33%" placeholder="请输入电话号"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="userAddress">
                    <el-input v-model="userForm.userAddress" style="width: 33%" placeholder="请输入地址"></el-input>
                </el-form-item>
                <el-form-item label="商店名称" prop="userShopName">
                    <el-input v-model="userForm.userShopName" style="width: 33%" placeholder="请输入商店名称"> </el-input>
                </el-form-item>
                <el-form-item label="备注" prop="userComment">
                    <el-input v-model="userForm.userComment" style="width: 33%" placeholder="备注"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('userForm')">提交</el-button>
                    <el-button @click="resetForm('userForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>

<script src="../../static/js/vue.js" th:src="@{/static/js/vue.js}"></script>
<script src="../../static/js/element.js" th:src="@{/static/js/element.js}"></script>
<script src="../../static/js/jquery-3.3.1.min.js" th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
<script src="../../static/js/utils.js" th:src="@{/static/js/utils.js}"></script>
<script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/config.js}"></script>
<!-- 引用vue组件相关的js文件 -->
<div th:replace="~{nav :: vue('添加用户')}"></div>
<div th:replace="~{header :: vue}"></div>
<!-- 本页面的js脚本 -->
<script th:inline="javascript">

    new Vue({
        el: '#page-content',
        data: {
            web_static_server:_global_web_server+"/static/",
            userForm: {
                userUserName: '',
                userPassword: '',
                userTelphone: '',
                userAddress: '',
                userShopName: '',
                userComment: '',
                userStatus: 1,
            },
            rules: {
                userUserName: [
                    { required: true, message: '用户名称不能为空', trigger: 'blur' }
                ],
                userPassword: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ],
                userTelphone: [
                    { required: true, message: '电话不能为空', trigger: 'blur' }
                ],
                userAddress: [
                    { required: true, message: '地址不能为空', trigger: 'blur' }
                ],
                userShopName: [
                    { required: true, message: '商店名称不能为空', trigger: 'blur' }
                ],

            }

        },

        created: function () {
            this.init();
        },
        computed: {

        },
        methods: {
            addOtherData: function () {
                this.otherDatas.push(new otherData());
            },
            removeOtherData: function (index) {
                this.otherDatas.splice(index, 1);
            },
            //查询类别
            init:function () {
                var url=_global_web_server +"/category/qryList";
                var _self=this;
                axios.get(url).then(function (response) {
                    var  jsonResult=response.data;
                    _self.categorys =jsonResult.data;


                }).catch(function (reason) {
                    console.log(reason);
                });
            },
            submitForm:function (formName) {
                var _self=this;
                this.$refs[formName].validate(function (valid) {
                    if (valid){

                        var url=_global_web_server +"/user/add";
                        $.ajax({
                            url:url,
                            data:_self.userForm,
                            type:'POST',
                            dataType:'json',
                            success:function (result) {
                                if(result.status == 200){
                                    alert(result.message)
                                    window.location.reload();
                                }else {
                                    alert(result.message)
                                    window.location.reload();
                                }
                            }
                        });
                    }else {
                        console.log('添加失败');
                        return false;
                    }
                })
            }
        }
    });
</script>

</body>

</html>